{% extends "../../base.html" %}

{% block crumbs %}
<div class="row">
    <div class="col-md-12">
        <ol class="breadcrumb"> 
            <li class="active">
                    <a class="this">Project</a>
                </li>
            <li class="active">
                <a class="this-page" href="/atp4p/project/">Test project</a>
            </li>
            <li class="active">
                <a class="">Project details</a>
            </li>
        </ol>

    </div>
</div>
{% endblock %}

{% block body %}

<div class="row">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Project details</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" id="form_update">
                <input name="id" value ={{ prj.id }} hidden>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Project name</label>
                        <div class="col-sm-6">
                            <input type="text" name="project" readonly="readonly" value ="{{ prj.project }}" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Project description</label>
                        <div class="col-sm-6">
                            <textarea name="description" class="form-control">{{prj.description }}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Scheduled task</label>
                        <div class="col-sm-6">
                            <input type="text" name="cron" class="form-control" value="{{ prj.cron }}" placeholder="cron expression: minute hour day month week">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Email address</label>
                        <div class="col-sm-6">
                            <input type="email" name="mails" class="form-control" value="{{ prj.mails }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Test tool</label>
                        <div class="col-sm-6">
                            <select name="engine" class="form-control">
                            	<option value="{{prj.engine}}" selected hidden>{{prj.engine}}</option> 
                                <option value="jmeter">jmeter</option>
                                <option value="locust">locust</option>
                            </select>
                        </div>
                    </div>
                    {% if not workers %}
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Load machine</label>
                        <div class="col-sm-6">
                            <input type="text" name="workers" class="form-control" value="{{workers.0}}" onchange="onChangeVal(this);" placeholder="Format: ip,username,password">
                        </div>
                        <input type="button" onclick="div_add()" value="Add"/>
                    </div>
                    {% else %}
                    {% for worker in workers %}
                    {% if forloop.first %}
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Load machine</label>
                        <div class="col-sm-6">
                            <input type="text" name="workers" class="form-control" value="{{workers.0}}" onchange="onChangeVal(this);" placeholder="Format: ip,username,password">
                        </div>
                        <input type="button" onclick="div_add()" value="Add"/>
                    </div>
                    {% else %}
                    <div class="form-group" id={{forloop.counter0}}>
                    <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-6">
                            <input type="text" name="workers" class="form-control" value="{{worker}}" onchange="onChangeVal(this);" placeholder="Format: ip,username,password">
                        </div>
                        <input type="button" onclick="del({{forloop.counter0}})" value="Delete"/>
                    </div>
                    {% endif %}
					{% endfor %}
					{% endif %}
                    <div id="append">
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Creation time</label>
                        <div class="col-sm-6">
                            <input type="text" name="create_time" readonly="readonly" class="form-control" value="{{prj.create_time|date:"Y-m-d h:i:s" }}">
                        </div>
                    </div>
                    <div align="center">
                    	<input type="button" name="Submit" class="btn btn-primary" onclick="javascript:history.back(-1);" value="Back">
                    	<button type="button" class="btn btn-primary" onclick="save()">Save</button>
                    	<a href="/atp4p/scene/" class="btn btn-primary">Scenario</a>
                    	<a href="/atp4p/result/" class="btn btn-primary">Result</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock%}

{% block javascript %}
<script type="text/javascript">
	var divId = 10;
	function div_add() {
		var divA = document.getElementById("append");
		var out = '<div class="form-group" id="'+divId+'">'
                        +'<label class="col-sm-2 control-label"></label>'
                        +'<div class="col-sm-6">'
                            +'<input type="text" name="workers" class="form-control" onchange="onChangeVal(this);" value="" placeholder="Format: ip,username,password">'
                        +'</div>'
                        +'<input type="button" onclick="del('+divId+')" value="Delete"/>'
                    +'</div>';
		divA.innerHTML = divA.innerHTML+out;
		divId += 1;
	};
	function del(divId) {
		document.getElementById(divId).remove();
	}
	//onchange allows the data in the box to remain unchanged when it is added or deleted
	function onChangeVal(e) {
    	e.setAttribute("value", e.value);
	}
	
	function save() {
    	var data = $("#form_update").serialize();
    	$.ajax({
			type: 'POST',
			url: "/atp4p/project/update/",
			data: data,
			contentType: "application/x-www-form-urlencoded;charset=UTF-8",
			success: function(res){
				var code = res.code;
				if(code == 0){
					window.location.href="/atp4p/project/";
				}else{
					alert("Update failure!"+res.msg)
				}
			},
			error: function(res){
				alert("Update failure!")
			}
		});
    };
</script>
{% endblock %}